<@prefix
    foaf="http://xmlns.com/foaf/0.1/"
    ex="http://id.example.com/"
    exterms="http://id.example.com/vocabulary/"
    rdfs="http://www.w3.org/2000/01/rdf-schema#" @>



<@-- overall page layout --@>

<@template type="node_set"@><?xml version="1.0"?>
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Example.com Employees</title>
        <style type="text/css">
            a:hover {
                background: #DFECF2;
            }
            
            body {
                width: 60%;
                margin-left: 20%;
            }
            
            div.chart {
                padding-left: 3em;
            }
            
            div.card {
                clear: both;
                border: solid 1px #555;
                margin-bottom: 3em;
                padding: 1em;
            }
            
            div.card h3 {
                float: left;
            }
            
            div.status {
                float: right;
                font-weight: bold;
                background: #FFFAC0;
                padding: 0.7em;
                position: relative;
                top: 0.7em;
            }
            
            div.email {
                float: left;
            }
            
            div.homepages {
                float: right;
            }
            
            div.subordinates {
                clear: both;
            }
            
            ul.inline {
                display: inline;
                margin: 0em;
            	list-style-type: none;
            }
            
            ul.inline li {
                display: inline;
            	margin: 0em 1em 0em 0em;
            }
            
            br {
                clear: both;
            }
        </style>
    </head>
    
    <body>
        <h1>Example.com Employees</h1>
        <@sort-nodes predicate="foaf:surname" lang="en"@>
            <h2>Alphabetical Index</h2>
            <@render-node-set flavour="index"@>
            
            <h2>Organizational Chart</h2>
            <@render-node-set flavour="chart"@>
            
            <h2>Personal Cards</h2>
            <@for-node@>
                <@render-node flavour="card"@>
            <@/for-node@>
        <@/sort-nodes@>
    </body>
    
</html>
<@/template@>



<@-- alphabetical index of employees --@>

<@template type="node_set" flavour="index"@>
<ul class="index">
    <@for-node@>
        <li><@render-node flavour="inline"@></li>
    <@/for-node@>
</ul>
<@/template@>







<@-- personal "card" of an employee --@>

<@template type="node" flavour="card"@>
    <@select-stmts subjects="@node"@>
    <div id="card-<@node-id-sha1@>" class="card">
        <@-- name --@>
        <@filter-stmt predicate="foaf:name" lang="en"@>
            <h3><@object@><@literal-val@><@/object@></h3>
        <@/filter-stmt@>
        
        <@-- status --@>
        <@filter-stmt predicate="exterms:status"@>
            <div class="status"><@object@><@literal-val@><@/object@></div>
        <@/filter-stmt@>
        
        <br />
        
        <@-- department --@>
        <@filter-stmt predicate="exterms:department"@>
            <div class="dept">
                <@object@><@render-node flavour="inline"@><@/object@> department
                
                <@-- determine the role if it is available --@>
                <@select-stmt subject="@node" predicate="exterms:role"@>
                    (<@object@><@literal-val@><@/object@>)
                <@/select-stmt@>
            </div>
        <@/filter-stmt@>
        
        <@-- email --@>
        <@filter-stmts predicates="foaf:mbox"@>
            <@have-stmts@>
                <div class="email">
                    <h4>Email:</h4>
                    <@render-stmt-set flavour="uri-list"@>
                </div>
            <@/have-stmts@>
        <@/filter-stmts@>
        
        <@-- web pages --@>
        <@filter-stmts predicates="foaf:homepage"@>
            <@have-stmts@>
                <div class="homepages">
                    <h4>Web:</h4>
                    <@render-stmt-set flavour="uri-list"@>
                </div>
            <@/have-stmts@>
        <@/filter-stmts@>
        
        <@-- subordinates --@>
        <@select-stmts predicates="exterms:boss" objects="@node"@>
            <@have-stmts@>
                <div class="subordinates">
                    <h4>Subordinates:</h4>
                    <@subjects@>
                        <@render-node-set flavour="inline-people-list"@>
                    <@/subjects@>
                </div>
            <@/have-stmts@>
        <@/select-stmts@>
        
        <br />
    </div>
    <@/select-stmts@>
<@/template@>



<@-- inline link to a department --@>

<@template type="node" for="exterms:Department" flavour="inline"@>
<@select-stmts subjects="@node" predicates="foaf:homepage" limit="1"@>
    <@for-stmt@>
        <@-- we know of a homepage for this department, render it as link --@>
        <@object@><a href="<@node-id@>"<@/object@>
        <@select-stmt subject="@node" predicate="rdfs:label"@>
            <@object@> title="Web page of the <@literal-val@> department"><@literal-val@></a><@/object@>
        <@/select-stmt@>
    <@/for-stmt@>
    
    <@no-stmts@>
        <@-- no homepage for this dept. Just render the label --@>
        <@select-stmt subject="@node" predicate="rdfs:label"@>
            <@object@><@literal-val@><@/object@>
        <@/select-stmt@>
    <@/no-stmts@>
<@/select-stmts@>
<@/template@>



<@-- list of mailboxes or web pages --@>

<@template type="stmt_set" flavour="uri-list"@>
<ul class="uri-list">
    <@objects@>
        <@for-node@>
            <li><a href="<@node-id@>"><@node-id@></a></li>
        <@/for-node@>
    <@/objects@>
</ul>
<@/template@>



<@-- inline list of people --@>

<@template type="node_set" flavour="inline-people-list"@>
<ul class="inline">
    <@for-node@>
        <li><@render-node flavour="inline"@></li>
    <@/for-node@>
</ul>
<@/template@>



<@-- inline rendition of an employee --@>

<@template type="node" for="foaf:Person" flavour="inline"@>
<@select-stmt subject="@node" predicate="foaf:name" lang="en"@>
    <a href="#card-<@node-id-sha1@>"><@object@><@literal-val@><@/object@></a>
<@/select-stmt@>
<@/template@>
